<template>
  <div class="home">
    <!--头部导航 B-->
    <div class='head'>
      <div>
        <div class="head_l">
          <div class='ico'>
            <img src="../../static/images/icon/logo.png" alt="">
          </div>
          <div class='txt'>
            <span>动物保护</span>
          </div>
        </div>
        <div class='head_r'>
          <div>
            <img src="../../static/images/icon/tx.png" alt="">
          </div>
          <div>
            <span style='font-size: 0.16rem;'>{{urseName}}</span>
          </div>
          <!--<img src="../../static/images/close.png" alt="" @click="quite" style="cursor: pointer;margin: 15px;width:20px;" title="退出">-->

        </div>
      </div>
      <svg id="svg-area" width="1920" height="25" style="z-index: 1;position: absolute;bottom: 0;
left: 0;">
        <path fill="rgba(102, 231, 146, 0.6)"></path>
        <path fill="rgba(0, 204, 70, 1)"></path>
      </svg>
    </div>
    <!--头部导航 E-->

    <!--主体部分-->
    <div class="container">
      <!--      左侧子路由导航 B-->
      <div class='l_nav'>
        <div class="fenlei">
          <div class="fltitle">
            <span>动物救助</span>
          </div>

          <div class="fla">
            <router-link :to="{path:'/rescue/inhand'}" class="lianjie">
              <span class="icon iconfont icon-jiuzhuzhong"></span>
              <span>动物救助</span>
            </router-link>
            <router-link :to="{path:'/dwtj'}" class="lianjie">
            <span class="icon iconfont icon-jiuzhutongji"></span>
            <span>统计分析</span>
            </router-link>

          </div>


          <div class="fltitle">
            <span>疫源疫病</span>
          </div>

          <div class="fla">
            <router-link :to="{path:'/disease'}" class="lianjie">
              <span class="icon iconfont icon-yiyuanyibing"></span>
              <span>监测管理</span>
            </router-link>
            <router-link :to="{path:'/statistics'}" class="lianjie">
              <span class="icon iconfont icon-jiuzhutongji"></span>
              <span>统计分析</span>
            </router-link>

          </div>


        </div>

      </div>
      <!--      左侧子路由导航 E-->
      <!--      路由容器 B-->
      <div
        class='route_b'>
        <router-view/>
      </div>
      <!--      路由容器 E-->
    </div>
    <!--主体部分-->

  </div>
</template>
<script>
  export default {
    data() {
      return {
        zk: true,
        urseName: "",
        areaId: ''
      }
    },
    created() {
      this.urseName = sessionStorage.getItem('urseName');
      this.areaId = sessionStorage.getItem('areaId');
    },

    mounted() {
      //        水波纹动画
      var svg_height = 30,
        svg_width = 1920,
        wave_data = [[], []],
        area = d3.area().y0(svg_height).curve(d3.curveBasis),   //curve会进行平滑处理
        svg_paths = [];
      var max = 800;  //控制速度
      for (var i = 0; i < max; i++) {
        var r = i / max * 2;
        wave_data[0].push(r + 1);           //波浪一
        wave_data[1].push(r + 0.4);   //波浪二（+1代表偏移π）
      }
      var d = svg_width / (wave_data[1].length - 1);
      svg_paths.push(d3.select('#svg-area path:first-child'));
      svg_paths.push(d3.select('#svg-area path:last-child'))

      function area_generator(data) {
        var wave_height = 0.8;     //波浪高度
        var area_data = data.map(function (y, i) {
          return [i * d, svg_height * (1 - (wave_height * Math.sin(y * Math.PI * 4) + 2) / 3)]; //+2将范围[-1,1]转成[1,3]
        });
//        return function() {
        return area(area_data);
//        };
      }

      function renderWave() {
        svg_paths.forEach(function (svg_path, i) {
          svg_path.attr('d', area_generator(wave_data[i]));
          wave_data[i] = getNextData(wave_data[i]);
        });
        requestAnimationFrame(renderWave);
      }

      function getNextData(data) {
        var r = data.slice(1);
        r.push(data[0]);
        return r;
      }

      requestAnimationFrame(renderWave);
//        水波纹动画
    },
    methods: {}
  }
</script>
<style scoped>
  @import "../../static/css/home.css";
</style>
